<template>
  <div class="nav_bar">
    <div class="icon_back" @click="$router.back()">
      <img src="../../../assets/img/navbar/ic_back_left.png" alt="">
    </div>
    <div class="title">{{title}}</div>
    <div class="icon"><slot name="right"></slot></div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
    },
  }
</script>

<style lang="less" scoped>
.nav_bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 1.173333rem;
  box-sizing: border-box;
  font-size: .426667rem;
  padding: 0 .426667rem;
  background: #fff;
  display: flex;
  .icon_back {
    width: 1.333333rem;
    img {
      padding: .293333rem 0;
      display: inline-block;
      width: .586667rem;
      height: .586667rem;
    }
  }
  .icon {
    width: 1.333333rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .title {
    flex: 1;
    font-size: .426667rem;
    font-weight: 500;
    color: #222222;
    text-align: center;
    line-height: 1.173333rem;
  }
}
</style>